<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true">
        <el-form-item label="问题发生时间">
          <el-date-picker
            v-model="searchParam.createTimeSearch"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="getcreateTime"
          />
        </el-form-item>
        <el-form-item label="失效模式">
          <el-input
            v-model="searchParam.failureModeContent"
            placeholder="请输入失效模式"
            clearable
            @keyup.enter="search"
          />
        </el-form-item>

        <el-form-item label="责任部门">
          <el-input
            v-model="searchParam.departmentName"
            placeholder="请输入责任部门"
            clearable
            @keyup.enter="search"
          />
        </el-form-item>
        <el-form-item label="内部外部">
          <el-select
            v-model="searchParam.isInternal"
            placeholder="请选择内部外部"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in useDictionary('isInternal')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="问题分类">
          <el-select
            v-model="searchParam.problemTypeCode"
            placeholder="请选择问题分类"
            clearable
          >
            <el-option
              v-for="item in useDictionary('ExceptionType')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="问题级别">
          <el-select
            v-model="searchParam.exceptionLevel"
            placeholder="请选择问题级别"
            clearable
          >
            <el-option
              v-for="item in useDictionary('ExceptionLevel')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="发布状态">
          <el-select
            v-model="searchParam.releaseState"
            placeholder="请选择发布状态"
            clearable
          >
            <el-option
              v-for="item in useDictionary('ReleaseeStatee')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="reset"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" min-width="50" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="内部/外部"
          prop="isInternal"
          min-width="180"
          show-overflow-tooltip
          align="center"
        >
          <template #default="scope">
            {{ useDictionary("isInternal", scope.row.isInternal) }}
          </template>
        </el-table-column>
        <el-table-column
          label="处理类型"
          prop="problemApproachType"
          min-width="180"
          show-overflow-tooltip
          align="center"
        >
          <template #default="scope">
            {{ useDictionary("ApproachType", scope.row.problemApproachType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="问题编号"
          prop="qualityProblemCode"
          min-width="180"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="问题描述"
          prop="describe"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="机理/原因分析"
          prop="reason"
          min-width="180"
          show-overflow-tooltip
          align="center"
        />

        <el-table-column label="问题描述" align="center">
          <el-table-column
            label="问题分类"
            prop="problemTypeCode"
            min-width="150"
            show-overflow-tooltip
            align="center"
          >
            <template #default="scope">
              {{ useDictionary("ExceptionType", scope.row.problemTypeCode) }}
            </template>
          </el-table-column>
          <el-table-column
            label="问题细分类"
            prop="exceptionTypeSubCode"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="严重度"
            prop="exceptionLevelCode"
            min-width="150"
            show-overflow-tooltip
          />
        </el-table-column>
        <el-table-column
          label="目标设定"
          prop="targetTime"
          min-width="180"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="问题提出部门"
          prop="proposeDepartmentName"
          min-width="120"
          show-overflow-tooltip
          align="center"
        />

        <el-table-column
          label="责任部门"
          prop="departmentCode"
          min-width="120"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="临时遏制措施"
          prop="temporary"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="完成时间"
          prop="temporaryTime"
          min-width="180"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="纠正措施"
          prop="correct"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="完成时间"
          prop="correctTime"
          min-width="180"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="过程预防"
          prop="prevent"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="完善标准"
          prop="standard"
          min-width="180"
          show-overflow-tooltip
        />

        <el-table-column label="发布状态" prop="releaseState" min-width="100">
          <template #default="scope">
            {{ useDictionary("ReleaseeState", scope.row.releaseState) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              @click="openPrintDialog(scope.row)"
            >
              下载报告
            </el-button>
            <el-button
              type="primary"
              size="small"
              link
              @click="openDialogdetail(scope.row)"
            >
              下载附件
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-[20px]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <q8dqualityproblemquery-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      @reset-table="(id:string) => (id?.length ? getTableList() : reset())"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisibleAttachment"
    />
    <attachment-edit
      :visible="addDialogOne.visible"
      :title="addDialogOne.title"
      :data="addDialogOne.data"
      @reset-table="(id:string) => (id?.length ? getTableList() : reset())"
      :is-readonly="addDialogOne.isReadonly"
      @change-visible="changeVisibleAttachment"
    />
    <q8dqualityWorkorderPrint
      :visible="addDialogPrint.visible"
      :title="addDialogPrint.title"
      :data="addDialogPrint.data"
      @change-visible="changeVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";

defineOptions({
  name: "QMSQ8DQUALITYPROBLEMQUERY",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/qms/q8dqualityproblem/queryBySolvePage";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  createTimeSearch: [],
  createTimeStart: "",
  createTimeEnd: "",
  failureModeContent: "",
  departmentCode: "",
  departmentName: "",
  isInternal: "",
  problemTypeCode: "",
  exceptionLevel: "",
  releaseState: "",
};

const deleteParam = {
  api: "/qms/q8dqualityproblem/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

onMounted(() => {
  getTableList();
});
const openattachment = () => {
  addDialogOne.title = "附件";
  addDialogOne.isReadonly = true;
  addDialogOne.visible = true;
  // getD52();
};
// 打印弹窗--定义
const addDialogPrint = reactive({
  visible: false,
  title: "",
  data: {},
});
const addDialogOne = reactive({
  visible: false,
  isReadonly: false,
  title: "",
  data: {},
});
const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: [],
  id: "",
});
function getcreateTime(data: any) {
  if (data) {
    searchParam.value.createTimeStart = data[0];
    searchParam.value.createTimeEnd = data[1];
  } else {
    searchParam.value.createTimeStart = "";
    searchParam.value.createTimeEnd = "";
  }
}
// 查询详情
async function getInfo(id: string) {
  const { data } = await request({
    url: "/qms/q8dattachment/getListById",
    method: "post",
    data: { qualityExceptionId: id },
  });
  addDialog.data = data;
  console.log(addDialog.data);
}
// 弹窗打开函数
async function openDialogdetail(roleObj?: any) {
  addDialog.title = "附件";
  await getInfo(roleObj.id); // 等待数据获取完成
  // 确保此时 addDialog.data 已更新
  console.log("11111", addDialog.data); // 这里可以看到数据
  addDialog.readvisible = true;
  addDialog.visible = true;
}
// 打印弹窗--打开
const openPrintDialog = (row) => {
  addDialogPrint.title = "报告";
  addDialogPrint.data = { id: row.id };
  addDialogPrint.visible = true;
};
function changeVisible(value: boolean) {
  addDialogPrint.visible = value;
  if (!value) {
    addDialogPrint.data = {};
  }
}
function changeVisibleAttachment(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}
</script>
